<!DOCTYPE HTML>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<meta charset="utf-8">
<head th:include="include :: header"></head>
<link th:href="@{/ajax/libs/jquery-layout/jquery.layout-latest.css}" rel="stylesheet"/>
<link href="../static/css/bootstrap.min.css" th:href="@{/css/bootstrap.min.css}" rel="stylesheet"/>
<link href="../static/css/font-awesome.min.css" th:href="@{/css/font-awesome.min.css}" rel="stylesheet"/>
<link href="../static/js/plugins/layer/layui-v2.4.5/layui/css/layui.css" th:href="@{/js/plugins/layer/layui-v2.4.5/layui/css/layui.css}" rel="stylesheet"/>

<body class="gray-bg">
<div class="container-div ui-layout-center">
    <div class="row">
        <table style="margin-top:5px;">
            <tr>
                <td style="padding-left:2px;text-align: right;" id="fileid" class="" name="">重复次数：</td>
                <td style="padding-left:2px;">
                    <input  name="continuenum" id="continuenum"  value="1" type="number" min="1" max="15" step="1" style="width:88px;height: 30px;border-radius:5%"
                            placeholder="重复次数" title="重复次数"/></td>
                <td style="padding-left:2px;text-align: right;">时间间隔：</td>
                <td style="padding-left:2px;">
                    <input class="laydate-icon form-control layer-date"
                           name="broaddate"
                           id="broaddate"
                           value="00:00:00"
                           style="width:160px;"
                           placeholder="播出日期"
                           title="播出日期"/>
                </td>
                <td style="padding-left:2px;text-align: right;">节目：</td>
                <td style="padding-left:2px;">
                    <input  name="" id="orgs"  value="" type="text" readonly style="width:328px;height: 30px;border-radius:5%" /></td>

            </tr>
        </table>
        <div class="col-sm-12 search-collapse">
            <form id="formId">
                <div class="select-list">
                    <ul>
                        <li>
                            节目名称：<input type="text" name="fname" style="width: 130px;"/>
                        </li>

                        <!--<li>-->
                            <!--是否公共：<input type="text" name="ispublic" style="width: 50px;"/>-->
                        <!--</li>-->
                        <!--<li>时长范围：</li>-->
                        <!--<li>-->
                        <!--<input class="laydate-icon form-control layer-date"-->
                                    <!--name="begindate"-->
                                    <!--id="begindate"-->
                                    <!--value="00:00:00"-->
                                    <!--readonly="readonly"-->
                                    <!--style="width:160px;"-->
                                    <!--placeholder="开始时间"-->
                                    <!--title="开始时间"/>-->
                        <!--</li>-->
                        <!--<li>&#45;&#45;</li>-->
                        <!--<li>-->
                        <!--<input class="laydate-icon form-control layer-date"-->
                                    <!--name="enddate"-->
                                    <!--id="enddate"-->
                                    <!--value="00:00:00"-->
                                    <!--readonly="readonly"-->
                                    <!--style="width:160px;"-->
                                    <!--placeholder="截止时间"-->
                                    <!--title="截止时间"/>-->
                        <!--</li>-->

                        <li>
                            <a class="btn btn-primary btn-rounded btn-sm" onclick="$.table.search()"><i class="fa fa-search"></i>&nbsp;搜索</a>
                            <a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset()"><i class="fa fa-refresh"></i>&nbsp;重置</a>
                        </li>
                    </ul>
                </div>
            </form>
        </div>
        <div class="col-sm-12 select-table table-striped">
            <table id="bootstrap-table" data-mobile-responsive="true"></table>
        </div>
    </div>
</div>
<div th:include="include :: footer"></div>
<script th:src="@{/ajax/libs/jquery-layout/jquery.layout-latest.js}"></script>

<script th:inline="javascript">
    var fids = new Array();
    var flenths = new Array();
    var fnames = new Array();
    var filenames = new Array();
    var temp = 0;
    /**
     * 选择文件
     * @param fid,fname,filename,flenth
     */
    function selectFiles(fname,fid,filename,flenth) {
        var num = $("#orgs").val();
        var test = num+","+fname;

        fnames[temp] = fname;
        $("#orgs").attr("value",test);
        fids[temp] = fid;
        $("#fileid").attr("class",fid);
        filenames[temp] = filename;
        $("#fileid").attr("name",filename);
        flenths[temp] = flenth;
        $("#orgs").attr("name",flenth);
        temp++;
    }
    var prefix = ctx + "broad/proSinmanage";
    $(function() {
        var options = {
            url: prefix + "/listFile",
            modalName: "文件选择",
            search: false,
            showExport: true,

            columns: [
                // {
                //     checkbox: true,
                // },
				{
					field : 'fid',
					title : '文件id',
					visible: false
				},
                {
                    field : 'fname',
                    title : '节目名称',
                    sortable: true,
                    width: '20%',
                    formatter:function (value,row,index) {
                        var results = value;
                        if(results.toString().length>20){
                            results = results.toString().substring(0,12)+"...";
                        }
                        var actions = [];
                        actions.push('<a href="#" onclick="details(\''+ value+'\')">'+results+'</a> ');
                        return actions.join('');
                    }
                },
                {
                    field : 'filename',
                    title : '文件名称',
                    sortable: true
                },
				{
					field : 'flenth',
					title : '文件时长',
					sortable: true
				},
                {
                    field : 'ispublic',
                    title : '是否公共',
                    formatter:function(value,row,index){
                        var html = "";
                        if(value == "0"){
                            html += "<label style='color: #ff5909'>非公共</label>";
                            return html;
                        }else {
                            html += "<label style='color: #02cd0d'>公共</label>";
                            return html;
                        }
                    },
                    sortable: true,
                },
				{
					field : 'createdtime',
					title : '创建时间',
					sortable: true
				},
		        {
		            title: '操作',
		            align: 'center',
		            formatter: function(value, row, index) {
		            	var actions = [];
		            	actions.push('<a class="btn btn-success btn-xs" href="#" onclick="lens(\''+row.fid+'\')"><i class="fa fa-edit"></i>试听</a> ');
                        actions.push('<a class="btn btn-success btn-xs" href="#" onclick="selectFiles(\''+ row.fname+'\',\''+ row.fid+'\',\''+row.filename+'\',\''+row.flenth+'\');"><i class="fa fa-edit"></i>选择</a> ');
                      return actions.join('');
		            }
		        }
            ]
        };
        $.table.init(options);
    });

    function lens(url) {
        var _url = "/broad/proSinmanage/getAudio?url="+url;
        var _title = '试听';
        var _width = "500";
        var _height = ($(window).height() - 250);
        layer.open({
            type: 2,
            maxmin: true,
            shade: 0.3,
            title: _title,
            fix: false,
            area: [_width + 'px', _height + 'px'],
            content: _url,
            shadeClose: true,
            btn: ['<i class="fa fa-check"></i> 确认', '<i class="fa fa-close"></i> 关闭'],
            yes: function (index, layero) {
                layer.close(index);
            }, cancel: function () {
                return true;
            }
        });
    }

     //提供给父页面获取选中的值
     function callbackfile() {
         /*在选择终端前先获取一次文本框的值，为的是可以选择多个小组的终端*/
         var fname = document.getElementById("orgs").value;
         var fileID = $("#fileid").attr("class");
         var filename = $("#fileid").attr("name");
         var flenth = $("#orgs").attr("name");
         var filenum = $("#continuenum").val();
         var time = $("#broaddate").val();
         datas = {  //调用它的父页面A的input这个function
             data_filenames:fnames,  //把data传入父页面A中的data_role，这里cllbackfile()是我另外计算data的一个函数，可以忽略
             data_fileID:fids,
             data_filename:filenames,
             data_file:flenths,
             data_num:filenum,
             data_time:time,
             data_length:temp
         }
         return datas;
     }
</script>
<script th:src="@{/js/jquery.min.js}"></script>
<script th:src="@{/js/bootstrap.min.js}"></script>
<script th:src="@{/js/jquery.tips.js}"></script>
<script th:src="@{/js/plugins/layer/layui-v2.4.5/layui/layui.js}"></script>

<!--时间插件-->
<script>
    layui.use('laydate', function(){
        var laydate = layui.laydate;

        //执行一个laydate实例
        laydate.render({
            elem:"#broaddate",
            type: 'time',
        });
        //执行一个laydate实例
        laydate.render({
            elem:"#begindate",
            type: 'time',
        });
        //执行一个laydate实例
        laydate.render({
            elem:"#enddate",
            type: 'time',
        });
    });
    function details(value) {
        var txt = value;
        alert(txt);

    }
</script>
<div th:include="include :: footer"></div>
</body>
</html>